<template>
    <div :class="['goodsDetail',{scrollForbidden:showModal==true}]">
        <!-- 头部 -->
        <swiper1 :imgList="imgList"></swiper1>
        <div class="name_wrapper">
            <div class="name">
                {{goodsDetail.name}}
            </div>
            <div class="desc">
                <div class="price">
                    ￥<span class="s-price">{{goodsDetail.s_price}}</span>
                </div>
                <div class="bottom">
                    <div class="m-price">￥{{goodsDetail.m_price}}</div>
                    <div class="sale">销量： {{goodsDetail.sale_count}}件</div>
                </div>
                <!-- <span>原价￥{{goodsDetail.m_price}}</span> -->
            </div>
        </div>
        <!-- 头部结束 -->
        <div class="service">
            <div class="service-item" v-for="item in goodsDetail.goods_service_label_list" :key="item">
                <img src="../../static/images/goodsDetails/gou.png"/>
                <span>{{item}}</span>
            </div>
            <div class="service-item" v-for="item in goodsDetail.discount_info" :key="item">
                <img src="../../static/images/goodsDetails/gou.png"/>
                <span>{{item.name}}</span>
            </div>
        </div>


        <!-- 规格等详情 -->
        <div class="goods_desc">
            <div>
                <div class="goods_desc_item" @click="showCart">
                    <span>选择规格</span>
                    <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
                </div>
                <!-- 规格等详情结束 -->

                <div class="desc-nav" style="text-align: center">
                    <div class="nav-item" @click="isShow(1)">
                        <span :class="{'active':is_show==1}">商品详情</span>
                    </div>
<!--                    <div class="nav-item" @click="isShow(2)">-->
<!--                        <span :class="{'active':is_show==2}">评价</span>-->
<!--                    </div>-->
                </div>

                <!-- 评论列 -->
<!--                <div class="comment" v-if="is_show==2">-->
<!--                    <div class="comment_btn">-->
<!--                        <div class="comment_btn_all" :class="{'comment-active':is_img==''}" @click="getComment()">-->
<!--                            所有评价({{commentList.total_comment_num==''?'0':commentList.total_comment_num}})-->
<!--                        </div>-->
<!--                        <div class="comment_btn_pic" :class="{'comment-active':is_img==1}" @click="getComment(1)">-->
<!--                            有图评价({{commentList.have_img_comment_num==''?'0':commentList.have_img_comment_num}})-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="comment_item" v-for="(value,index) in commentList.data" v-show="index<5" :key="index">-->
<!--                        <div class="comment_item_top">-->
<!--                            <div class="comment_item_img">-->
<!--                                <img :src="value.user_info.photo_url"/>-->
<!--                            </div>-->
<!--                            <div class="comment_item_nick">{{value.user_info.nickname}}</div>-->
<!--                        </div>-->
<!--                        <div class="comment_item_content">{{value.content}}</div>-->
<!--                        <div class="comment_item_pic">-->
<!--                            <img :src="value1" mode="aspectFill" v-for="(value1,index1) in value.comment_img"-->
<!--                                 @click="previewImage(value1,value.comment_img)" :key="index1">-->
<!--                        </div>-->
<!--                        <div class="comment_item_time">{{value.created_at}}</div>-->
<!--                    </div>-->
<!--                </div>-->
                <!-- 评论列结束 -->
            </div>

            <!-- 商品介绍 -->
            <div class="goods_introduce" v-if="is_show==1">
                <div class="content">
                    <div v-html="goodsDetail.detail"></div>
                </div>
                <!-- <div>海外品暂不支持7天无理由退换，介意请慎拍，谢谢！</div> -->
                <!--          <img :src="value" alt="" v-for="(value,index) in goodsDetail.detail" @click="previewImage(value, goodsDetail.detailed_description)" :key="index" mode="widthFix">-->
            </div>
            <!-- 商品介绍结束 -->

            <!-- 底部购物栏 -->
            <div class="cartBar">
                <div class="cartBar_left" v-if="!credit">
                    <button class="cartBar_left_item" open-type="contact">
                        <img v-if="FileUrl" :src="FileUrl+'customer-service.png'" alt="">
                        <div>客服</div>
                    </button>
                    <!--             <div class="cartBar_left_item">
                                  <img src="../../../static/images/goodsDetails/collect.png" alt="">
                                  <! <img src="../../../static/images/goodsDetails/collect_active.png" alt=""> -->
                    <!-- <div>收藏</div>
                  </div> -->
                    <div class="cartBar_left_item cartIcon_wrapper" @click="toCart">
                        <img v-if="FileUrl" :src="FileUrl+'shop-car.png'" alt="">
                        <div>购物车</div>
                        <div class="cartIcon" v-show="cartListNum!='0' &&cartListNum">{{cartListNum}}</div>
                    </div>
                </div>
                <div class="cartBar_right" v-if="!credit">
                    <div @click="showCart">加入购物车</div>
                    <div @click="buy">立即购买</div>
                </div>
                <div class="cartBar_right" v-if="credit">
                    <div @click="buy">立即兑换</div>
                </div>
            </div>
            <!-- 底部购物栏结束 -->

            <!-- 弹出层 -->
            <div class="mask" v-if="showModal" @click="hideCart"></div>
            <div class="modalDlg" v-if="showModal">
                <div class="modalDlg_top">
                    <img :src="goodsDetail.thumb_url" alt="">
                    <div class="modalDlg_top_right">
                        <div class="modalDlg_top_right_name">
                            <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
                            <span>{{goodsDetail.name}}</span>
                        </div>
                        <div class="cart_price">
                            <span v-if="credit">{{goodsDetail.exchange_integral}}积分</span>
                            <span v-else>￥{{goodsDetail.s_price}}</span>
                            <span>库存：{{goodsDetail.stock}}</span>
                        </div>
                    </div>
                </div>
                <div class="modalDlo_center">
                    <div class="modalDlo_center_tit" v-if="colorAll.length!=0">规格</div>
                    <div class="modalDlo_center_classify">
                        <div
                                v-for="(item,index) of colorAll"
                                :key="index" @click="select_classify(index)"
                                :class="{selectClassify:index==colorIndex}"
                        >
                            {{item}}
                        </div>
                    </div>
                </div>
                <div class="modalDlo_bottom">
                    <count @numberChange="numberChange" :stock="goodsDetail.stock">
                        <div>购买数量</div>
                    </count>
                </div>
                <div class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</div>
                <div class="join_cart" v-else @click="buying">立即购买</div>
            </div>
            <!-- 弹出层结束 -->
        </div>
    </div>
</template>

<script>
import swiper1 from '@/components/swiper'
import count from '@/components/count'
import {setTimeout} from 'timers';

export default {
    name: 'goodsDetail',
    components: {
        swiper1,
        count
    },
    data() {
        return {
            FileUrl: this.$base,
            id: '',//商品id
            goodsDetail: '',//商品信息
            showModal: false,//显示弹出层
            buyNow: false,//显示加入购物车还是立即购买按钮
            is_show: 1,
            num: 1,//购买商品数量
            cartListNum: '',//购物车数量
            commentList: "",   //评论内容
            imgList: '',
            credit: '',//credit为来自积分商城的跳转
            classifyIndex: -1,//规格索引
            classifyId: '',//规格id
            page: 0,
            is_img: '',
            goods_spu_info: [],
            size: [],
            selectSizes:[],
            sizeAll: [],
            color:[],
            selectColors:[],
            colorAll: [],
            sizeIndex: -1,
            colorIndex: -1,
        }
    },
    onLoad(options) {
        this.credit = options.from;
        this.id = options.id;
        if (options.user_id){
            wx.setStorageSync('to_user_id', options.user_id);
        }
        this.getGoodsDetails(this.id)
        this.getCartList()
        // this.getComment()
    },
    watch: {
        goodsDetail(nval) {
            if (nval.goods_banner.length != 0) {
                this.imgList = nval.goods_banner
            } else {
                this.imgList = [nval.thumb_url]
            }
        }
    },
    methods: {
        isShow(index) {
            this.is_show = index;
        },
        previewImage(value, value1) {
            this.$currency.previewImage(value, value1)
        },
        showCart() { //显示加入购物车
            this.num = 1;//清除规格数量
            this.showModal = true
            this.buyNow = false
        },
        buy() {//显示立即购买
            this.num = 1;//清除规格数量
            this.showModal = true
            this.buyNow = true
        },
        async buying() {   //点击弹窗的立即购买
            if (this.num <= 0) {
                uni.showToast({title:'购买数量不能为0',icon:"none"});
                return
            } else if (this.classifyId == '' && this.credit != 'credit') {
                uni.showToast({title:'先选择规格吧',icon:"none"});
                return
            }
            var userToken=wx.getStorageSync('userToken')
            let res = await this.$api.submitOrder( {
                type: '',
                goods_id: this.id,
                num: this.num,
                goods_spu_id: this.classifyId,
                user_token: userToken
            })
            if (res.data.level == 'success') {
                this.$store.dispatch('setOrder', res.data.data)
                if (this.credit == 'credit') {
                    uni.navigateTo({url:'/pages/orderConfirm/orderConfirm?from=credit'})
                } else {
                    uni.navigateTo({url:'/pages/orderConfirm/orderConfirm'})
                }

            } else {
                uni.showToast({title:res.data.message,icon:"none"})

            }

        },
        hideCart() {
            this.showModal = false
        },
        async getGoodsDetails(id) {
            let res = await this.$api.getGoodsDetails({
                goods_id: id,
                user_token: wx.getStorageSync('userToken')
            })
            if (res.data.level == 'success') {
                let str = res.data.data;
                if (str.detail != null) {
                    str.detail = str.detail.replace(/<img[^>]*>/gi, function (match, capture) {
                        return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
                    });
                    str.detail = str.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
                }
                this.goodsDetail = str
                this.goods_spu_info = str.goods_spu_info;
                this.select();
            }
        },
        select(){
            this.colorAll = [];
            this.size = [];
            this.color = [];
            this.colorIndex = -1;
            this.classifyId = '';
            this.goods_spu_info.forEach(item => {
                if (this.colorAll.indexOf(item.color_spu_name)==-1){
                    this.colorAll.push(item.color_spu_name)
                }
            })
        },
        selectColor(value){
            let color = [];
            // let stock = [];
            this.goods_spu_info.forEach(item => {
                color.push(item.color_spu_name);
            })
            this.color.push(color);
        },
        select_classify(index) {//选择规格
            // this.classifyIndex = index
            // this.classifyId = item.id
            // this.numberChange=1
            if (this.colorIndex == index){
                this.colorIndex = -1;
                this.classifyId = '';
                this.getGoodsDetails(this.id);
            } else {
                this.colorIndex = index;
            }

            let str = [];
            if (this.colorIndex!=-1){
                this.selectClassifys()
            }
        },
        selectClassifys(){
            this.goods_spu_info.forEach(item => {
                if (item.color_spu_name==this.colorAll[this.colorIndex]){
                    this.$set(this.goodsDetail, 'stock', item.stock)
                    this.$set(this.goodsDetail, 's_price', item.price);
                    this.$set(this.goodsDetail,'thumb_url',item.img_url);
                    this.classifyId = item.id;
                }
            })
        },
        numberChange(num) {
            this.num = num
        },
        async addCart() {//添加到购物车
            const _this = this
            if (this.num <= 0) {
                uni.showToast({title:'购买数量不能为0',icon:"none"});
                return
            } else if (this.classifyId == '') {
                uni.showToast({title:"先选择规格吧",icon:"none"});
                return
            }
            var userToken = wx.getStorageSync('userToken')
            let res = await this.$api.addShopCart( {
                goods_id: this.id,
                num: this.num,
                user_token: userToken,
                goods_spu_id: this.classifyId
            })
            wx.showLoading()
            if (res.data.level == 'success') {
                uni.showToast({title:'成功加入购物车',icon: "none"});
                this.showModal = false;
                wx.hideLoading();
                this.getCartList()

            } else {
                wx.hideLoading({
                    success: function () {
                        uni.showToast({title:res.data.message, icon:'none'})
                    }
                });

            }
        },
        async getCartList() {
            let userToken = wx.getStorageSync('userToken');
            if (userToken) {
                let res = await this.$api.getShopCart( {user_token: userToken});
                if (res.data.level == 'success') {
                    this.cartListNum = res.data.data.length
                }
            }

        },
        select_size(index){
            if (index == this.sizeIndex){
                this.sizeIndex = -1;
                this.classifyId = '';
                this.getGoodsDetails(this.id);
            } else {
                this.sizeIndex = index;
            }

            // if (this.colorIndex==-1){
            //   this.selectColors = this.color[index];
            //   // size[sizeIndex].indexOf(sizeAll[sizeIndex])==-1
            // }
            let str = [];
            this.colorAll.forEach(item=>{
                if (this.color[index].indexOf(item)==-1){
                    str.push(true);
                }else {
                    str.push(false);
                }
            })
            this.selectColors = str;
            if (this.sizeIndex!=-1&&this.colorIndex!=-1){
                this.selectClassifys()
            }
        },
        toCart() {
            wx.switchTab({url: '/pages/cart/cart'})
        },
        toGoodsIntroduce(value, tag) {
            wx.navigateTo({url: `/pages/goodsDetailIntroduce/goodsDetailIntroduce?tag=${tag}&&id=${this.id}`})
        }
    },
    onShareAppMessage() {
        return {
            title: '百越网购商城',
            desc: this.goodsDetail.name,
            path:'/pages/goodsDetail/goodsDetail?user_id='+ wx.getStorageSync('user_ID')+'&id='+ this.id
        }
    },
    onShow() {
        this.num = 1;//清空选择商品的数量
        this.showModal = false//显示弹出层
        this.buyNow = false//显示加入购物车还是立即购买按钮
        this.classifyIndex = -1;//规格索引
        // this.classifyId = '';//规格id
    },

}
</script>

<style scoped lang="scss">
    @import "../../common/css/mixin";

    .scrollForbidden {
        overflow: hidden; /*有弹出层时禁止下层滑动*/
    }

    /* 头部 */
    .goodsDetail {
        width: 100%;
        height: 100%;
        background: #eee;
    }

    .name_wrapper {
        padding: 10px;
        background: #fff;
    }

    .name {
        @include ellipsis(2);
        line-height: 40rpx;
        max-height: 80rpx;
        font-size: 32rpx;
        font-weight: bold;
    }

    .desc {
        padding: 10rpx 0;

        .price {
            font-size: 26rpx;
            color: #e12317;
            line-height: 70rpx;

            .s-price {
                font-size: 46rpx;
            }
        }

        .bottom {
            font-size: 26rpx;
            color: #5c5c5c;
            @include flex(flex-start);
            line-height: 50rpx;

            .m-price {
                text-decoration: line-through;
                margin-right: 30rpx;
            }
        }
    }

    .service {
        background: #ffffff;
        margin-top: 1rpx;
        padding: 5px 10px;
        @include flex(flex-start);
        flex-direction: row;
        flex-wrap: wrap;
        .service-item {
            margin: 10rpx 30rpx 10rpx 0;
            img {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
                vertical-align: middle;
            }

            span {
                font-size: 24rpx;
                color: #5c5c5c;
                line-height: 30rpx;
            }
        }
    }

    /* 中间详情 */
    .goods_desc {
        width: 100%;
        margin-top: 10px;
        padding-bottom: 100rpx;
    }

    .goods_desc_item {
        background: #fff;
        display: flex;
        height: 40px;
        align-items: center;
        margin-bottom: 10px;
        padding: 5px 10px;
    }

    .goods_desc_item img {
        width: 20px;
        height: 20px;
    }

    .list_item_arrow {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .desc-nav {
        width: 100%;
        background: #ffffff;
        border-bottom: 2rpx solid #eeeeee;
        @include flex(flex-start);
        flex-direction: row;

        .nav-item {
            width: 100%;
            font-size: 30rpx;
            color: #5c5c5c;
            line-height: 100rpx;
            height: 100rpx;
            text-align: center;

            .active {
                line-height: 100rpx;
                height: 100rpx;
                color: #e12317;
                border-bottom: 1rpx solid #e12317;
                display: inline-block;
            }
        }
    }

    /* 评论列 */
    .comment {
        width: calc(100% - 20px);
        background: #fff;
        padding: 10px 10px 50px 10px;
    }

    .comment_item {
        padding: 5px 0;
        border-bottom: 1px solid #eee;
        color: rgb(63, 60, 60);
        font-size: 14px;
    }

    .comment_item_top {
        @include flex(flex-start);
        flex-direction: row;
        /*margin-bottom: 10px;*/
    }

    .comment_item_img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 360rpx;
        overflow: hidden;
        margin-right: 10rpx;
    }

    .comment_item_nick {
        line-height: 80rpx;
        height: 80rpx;
    }

    .comment_item_content {
        padding: 10rpx 0 10rpx 100rpx;
        line-height: 40rpx;
    }

    .comment_item_time {
        text-align: right;
        font-size: 28 rpx;
        color: #5c5c5c;
    }

    .comment_btn {
        /*margin-top:10px;*/
        padding: 10px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 1rpx solid #eeeeee;
    }

    .comment_btn_all, .comment_btn_pic {
        width: 40%;
        height: 30px;
        line-height: 30px;
        padding: 2.5px 5px;
        text-align: center;
        border-radius: 5px;
        border: 1px solid gray;
    }

    /* 商品介绍 */
    .goods_introduce {
        background: #fff;
        width: calc(100% - 20px);
        padding: 10px 10px 50px 10px;
    }

    /*.goods_introduce>div:nth-child(1){*/
    /*  margin-top:5px;*/
    /*  margin-left: 10px;*/
    /*}*/
    /*.goods_introduce>div:nth-child(2){*/
    /*  margin-top:5px;*/
    /*  margin-left: 10px;*/
    /*  color:red;*/
    /*  margin-bottom:20px;*/
    /*}*/
    /*.goods_introduce>img{*/
    /*  width:100%;*/
    /*  height: auto;*/
    /*  display: block;*/
    /*}*/


    /* 底部购物栏 */
    .cartBar {
        width: 100%;
        height: 45px;
        display: flex;
        position: fixed;
        bottom: 0;
        background: #fff;
    }

    .cartBar_left, .cartBar_right {
        flex: 1;
        display: flex;
    }

    .cartBar_left_item {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
    }

    .cartBar_left_item > img {
        width: 20px;
        height: 20px;
    }

    .cartBar_right {
        display: flex;
        line-height: 45px;
        text-align: center;
        color: #fff;
    }

    .cartBar_right > div {
        flex: 1;
    }

    .cartBar_right > div:nth-child(1) {
        background: orange;
    }

    .cartBar_right > div:nth-child(2) {
        background: red;
    }

    .cartIcon_wrapper {
        position: relative;
    }

    .cartIcon {
        position: absolute;
        background: red;
        right: 20px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        top: -5px;
    }


    /* 弹出框 */
    .mask{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        z-index: 9000;
        opacity: 0.7;
    }
    .modalDlg{
        width: 100%;
        height:60%;
        position: fixed;
        bottom:0;
        left: 0;
        z-index: 9999;
        background-color: #fff;
        padding-bottom: 40px;
    }

    .modalDlg_top{
        padding:5px;
        padding-right:25px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        height: 30%;

    }
    .modalDlg_top>img{
        width:80px;
        height: 80px;
    }
    .modalDlg_top_right{
        margin-left:20px;
        width:calc(100% - 100px);
    }
    .modalDlg_top_right_name{
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;//向显示多少行就给多大值
        -webkit-box-orient: vertical;
        color: #787777;
        font-size: 26rpx;
        span{
            @include ellipsis(3)
        }
    }
    .modalDlg_top_right_name_tag{
        color:purple;
        display: inline-block;
        width:50px;
        text-align: center;
        border:1px solid purple;
        font-size: 10px;
        border-radius: 5px;
        margin-right:5px;
    }
    .modalDlg_top_right_name_tag+span{
        width:200px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .modalDlo_bottom{
        margin-left:10px;
    }
    .cart_price{
        margin-top:15px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .cart_price>span:nth-child(1){
        color:red;
    }
    .modalDlo_center{
        max-height: 50%;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
        width:100%;
        /*max-height: 45%;*/
    }
    .modalDlo_center_classify{
        display:flex;
        align-items: center;
        flex-wrap:wrap;
        margin:10px;
        /*padding-bottom: 50px;*/
    }
    .modalDlo_center_classify>div{
        border:1px solid #eee;
        padding:2.5px 5px;
        border-radius: 5px;
        margin-right:5px;
        margin-top: 5px;
        font-size: 26rpx;
        color: #787777;
        text-align: center;
    }
    .modalDlo_center_tit{
        padding-left:10px;
    }
    .join_cart{
        width:100%;
        background: rgb(196, 75, 75);
        color:#fff;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom:0;
    }
    button::after {
        border: none;
    }
    button {
        background-color: #fff;
        line-height: 16px;
        font-size: 10px;
        border-radius:0;
    }
    /* 规格 */
    .selectClassify{
        border:red 1px solid !important;
        color:red;
    }

    .comment_item_pic {
        /*display: flex;*/
        padding: 10rpx 0 10rpx 80rpx;
        @include flex(flex-start);
        flex-direction: row;
        flex-wrap: wrap;
    }

    .comment_item_pic > img {
        width: calc((100vw - 180rpx)/3);
        height: calc((100vw - 180rpx)/3);
        margin-left: 20rpx;
        border-radius: 8rpx;
        overflow: hidden;
    }

    .comment-active {
        background: red;
        color: #ffffff;
        border: none;
    }
    .disabled{
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }
</style>
